<template>
	<view class="czcd p-a" v-if="show" :style="{left:left+'rpx',top:top+'rpx'}" @click.stop="showStop">
		<view class="sjx" :style="{right:sRight+'rpx'}"></view>
		<view class="bg flex f-w" v-if="mode=='single'">
			<!-- <view class="item mb20 f-c-ac" v-if="type==4" @click="cz('urgeUp')">
				<view><u-icon name="bell" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">催起</view>
			</view> -->
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('give')">
				<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">赠菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4" @click.stop="cz('discount')">
				<view><u-icon name="tags" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">商品折/免</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('backFood')">
				<view><u-icon name="error-circle" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">退菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state==8" @click.stop="cz('cancelbackFood')">
				<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">取消退菜</view>
			</view>
		</view>
		<view class="bg flex f-w" v-else-if="mode=='singleDis'">
			<block>
				<view class="item mb20 f-c-ac" v-if="v.discountType==1" @click.stop="cz('backGive')">
					<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">取消赠菜</view>
				</view>
				<view class="item mb20 f-c-ac" v-if="v.discountType==2" @click.stop="cz('backDis')">
					<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">取消打折</view>
				</view>
				<view class="item mb20 f-c-ac" v-if="v.discountType==3" @click.stop="cz('backSub')">
					<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">取消立减</view>
				</view>
				<view class="item mb20 f-c-ac" v-if="v.discountType==6 || v.discountType==7" @click.stop="cz('hyGive')">
					<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">赠菜</view>
				</view>
				<view class="item mb20 f-c-ac" v-if="v.state<6 && (v.discountType==6 || v.discountType==7)" @click.stop="cz('hyBackFood')">
					<view><u-icon name="error-circle" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">退菜</view>
				</view>
			</block>
		</view>
		<view class="bg flex f-w" v-else-if="mode=='multiple'">
			<!-- 
			<view class="item mb20 f-c-ac" v-if="type==1 || type==2">
				<view><u-icon name="reload" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">转菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==1 || type==2">
				<view><u-icon name="edit-pen" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">划菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==1">
				<view><u-icon name="man-add" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">拼桌</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==1">
				<view><u-icon name="cut" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">撤单</view>
			</view> -->
			<!-- <view class="item mb20 f-c-ac" v-if="type==4" @click="cz('urgeUp')">
				<view><u-icon name="bell" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">催起</view>
			</view> -->
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('give')">
				<view><u-icon name="gift" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">赠菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('backFood')">
				<view><u-icon name="error-circle" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">退菜</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="v.orderIndex.state != 10 && (type==6 && v.state!=8) || (type==4 && v.state>3 && v.state<8)" @click.stop="cz('refundOrder')">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">退款</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('turntable')">
				<view><u-icon name="share-square" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">转台</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.state<6" @click.stop="cz('parallel')">
				<view><u-icon name="grid" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">并台</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="type==4 && v.payType==2 && (v.state==3 || v.state==4)" @click.stop="cz('cx')">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">整单撤销</view>
			</view>
			<block v-if="type==4 && v.payType==2 && v.state<6">
				<view class="item mb20 f-c-ac" @click.stop="cz('cancleWipe')" v-if="v.discounts && v.discounts.manualDiscount">
					<view><u-icon name="tags" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">取消折/免</view>
				</view>
				<view class="item mb20 f-c-ac" @click.stop="cz('discountOrder')" v-else>
					<view><u-icon name="tags" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">整单折/免</view>
				</view>
				<view class="item mb20 f-c-ac" @click.stop="cz('freeOf')">
					<view><u-icon name="tags" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">免单</view>
				</view>
				<view class="item mb20 f-c-ac" @click.stop="cz('coin')"  v-if="!v.discounts || v.discounts && !v.discounts.wipeZero">
					<view><u-icon name="cut" color="#fff" size="26"></u-icon></view>
					<view class="cf f12 mt5">抹零</view>
				</view>
			</block>
			<view class="item mb20 f-c-ac" v-if="(type==6 || type==4 || type==5)" @click.stop="cz('orderPrints',7)">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">客单</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="(type==6 || type==4 || type==5)" @click.stop="cz('orderPrints',3)">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">结账单</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="(type==6 || type==4 || type==5)" @click.stop="cz('orderPrints',6)">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">预结单</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="(type==6 || type==4 || type==5)" @click.stop="cz('orderPrints',13)">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">制作总单</view>
			</view>
			<view class="item mb20 f-c-ac" v-if="(type==6 || type==4 || type==5)" @click.stop="cz('orderPrints',14)">
				<view><u-icon name="calendar" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">制作分单</view>
			</view>
			<!-- <view class="item mb20 f-c-ac" v-if="type==2">
				<view><u-icon name="more-circle" color="#fff" size="26"></u-icon></view>
				<view class="cf f12 mt5">查看详情</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show:{
				type: Boolean,
				default: () => false
			},
			top:{
				type: Number,
				default: () => 90
			},
			left:{
				type: Number,
				default: () => 28
			},
			sRight:{
				type: Number,
				default: () => -632
			},
			mode:{
				type: String,
				default: () => 'multiple'
			},
			tsof:{
				type: String,
				default: () => 'after'
			},
			type:{
				type: Number,
				default: () => 1
			},
			v:{
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color')
			}
		},
		methods: {
			cz(n,t){
				this.$emit('op',n,t)
			},
			showStop(){
				this.$emit('showStop')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.czcd {
		top: 90rpx;
		left: 28rpx;
		width: 700rpx;
		z-index: 10;

		.sjx {
			position: relative;
			right: -632rpx;
			bottom: -1rpx;
			width: 0;
			height: 0;
			border-left: 18rpx solid transparent;
			border-right: 18rpx solid transparent;
			border-bottom: 18rpx solid #2A2C3B;
		}

		.bg {
			width: 100%;
			background: #2A2C3B;
			padding: 30rpx 10rpx 0 10rpx;
			border-radius: 20rpx;

			.item {
				width: 134rpx;
			}
		}
	}
</style>